<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>进阶：9、过渡状态 状态动画与watcher</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/tween.js@16.3.4"></script>
	<script src="https://unpkg.com/color-js@1.0.3/color.js"></script>
	<style type="text/css">
	.example-7-color-preview {
	  display: inline-block;
	  width: 50px;
	  height: 50px;
	}	
	</style>
</head>
<body>
	<div id="animated-number-demo">
	  <input v-model.number="number" type="number" step="20">
	  <p>{{ animatedNumber }}</p>
	</div><br/>	

	<div id="example-7">
	  <input
	    v-model="colorQuery"
	    v-on:keyup.enter="updateColor"
	    placeholder="Enter a color"
	  >
	  <button v-on:click="updateColor">Update</button>
	  <p>Preview:</p>
	  <span
	    v-bind:style="{ backgroundColor: tweenedCSSColor }"
	    class="example-7-color-preview"
	  ></span>
	  <p>{{ tweenedCSSColor }}</p>
	</div>	

	<script type="text/javascript">
		// 上一节的demo展示的是dom插入、删除、切换的过渡，vue告诉我们
		// 针对数据元素本身的特效也是可以有的，包括：
		// （1）数字和运算
		// （2）颜色的显示
		// （3）SVG 节点的位置
		// （4）元素的大小和其他的属性
		// PS.所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 
		//    Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。
		//    
		//  实例1：数字过渡
		var vm1 = new Vue({
			el: '#animated-number-demo',
			data: {
				number: 0,
				animatedNumber: 0
			},
			watch: {
				// 其实原理很简答，就是对数据进行监听，然后获取新旧两值
				// 再利用插件渲染过渡效果
				number: function(newValue, oldValue){
					var vm = this
					function animate(time){
						requestAnimationFrame(animate)
						TWEEN.update(time)
					}
				      new TWEEN.Tween({ tweeningNumber: oldValue })
				        .easing(TWEEN.Easing.Quadratic.Out)
				        .to({ tweeningNumber: newValue }, 500)
				        .onUpdate(function () {
				          vm.animatedNumber = this.tweeningNumber.toFixed(0)
				        })
				        .start()
				      animate()					
				}
			}
		})

		// 实例2：颜色过渡
		var Color = net.brehaut.Color
		var vm2 = new Vue({
			el: '#example-7',
			data: {
				colorQuery: '',
				color: {
				  red: 0,
				  green: 0,
				  blue: 0,
				  alpha: 1
				},
				tweenedColor: {}
			},
			created: function () {
				this.tweenedColor = Object.assign({}, this.color)
			},
			watch: {
				// 对tweenedColor更新计算
				color: function () {
				  function animate (time) {
				    requestAnimationFrame(animate)
				    TWEEN.update(time)
				  }
				  new TWEEN.Tween(this.tweenedColor)
				    .to(this.color, 750)
				    .start()
				  animate()
				}
			},
			computed: {
				// 返回更新后的颜色属性值
				tweenedCSSColor: function () {
				  return new Color({
				    red: this.tweenedColor.red,
				    green: this.tweenedColor.green,
				    blue: this.tweenedColor.blue,
				    alpha: this.tweenedColor.alpha
				  }).toCSS()
				}
			},
			methods: {
				updateColor: function () {
				  // 将三原色值输入转化为RGB值，并清空输入
				  // 并触发color的监视回调
				  this.color = new Color(this.colorQuery).toRGB()
				  this.colorQuery = ''
				}
			}
		})		
	</script>
</body>
</html>